<template>
  <div>
    <el-descriptions title="课程详细" style="font-size:20px">

      <el-descriptions-item>
        <template slot="label">
          <i class="fa fa-info" aria-hidden="true"></i>
          &nbsp;&nbsp;&nbsp;课程名
        </template>
        {{ courseDetials[0].courseName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="fa fa-graduation-cap" aria-hidden="true"></i>
          &nbsp;课程学分
        </template>
        {{ courseDetials[0].credit }}
      </el-descriptions-item>
      <el-descriptions-item label="开设学院">
        <template slot="label">
          <i class="fa fa-university" aria-hidden="true"></i>
          &nbsp;开设学院
        </template>
        {{
            courseDetials[0].college
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="fa fa-th-list" aria-hidden="true"></i>
          &nbsp;课程类型
        </template>
        {{
            courseDetials[0].classification
        }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
    <el-descriptions title="选课表"></el-descriptions>


    <el-table :data="courseDetials" stripe style="width: 50%" border>
      <el-table-column label="教师" width="180">
        <template slot-scope="scope">
          {{ scope.row.teacher }}
        </template>

      </el-table-column>
      <el-table-column label="上课时间" width="180">
        <template slot-scope="scope">
          {{ timeToChinese(scope.row.time) }}
        </template>

      </el-table-column>
      <el-table-column label="周期" width="180">
        <template slot-scope="scope">
          {{ scope.row.period + "周" }}
        </template>
      </el-table-column>

      <el-table-column label="选课" >
        <template slot-scope="scope">
          <el-button @click="chooseCourse(scope.row)" type="primary">选课</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="评价">
        <template slot-scope="scope">
          <el-button @click="score(scope.row), dialogVisible = true" type="primary">评价</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-divider></el-divider>
    <el-descriptions title="评论"></el-descriptions>
    <CommentVue :courseNumber=courseNumber></CommentVue>

    <!-- <el-dialog title="为这节课评分" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>
        <el-rate v-model="courseScore" :max="3" show-text :texts="texts">
        </el-rate>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="realScore(),dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->

  </div>
</template>

<script>
import CommentVue from "@/components/user/CommentVue.vue";
export default {
  components: {
    CommentVue,
  },
  data() {
    return {
      username: "",
      userId: 0,
      courseNumber: 0,
      courseDetials: {
      },
      dialogVisible: false,
      courseScore:3,
      texts:["差评","一般","好评"],
      courseId:0,
    };
  },
  methods: {
    chooseCourse(courseInfo) {
      this.$axios({
        method: "post",
        url: "http://localhost:8000/course/select",
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        },
        data: {
          userId: this.userId,
          courseId: courseInfo.id
        }
      }).then((res) => {
        console.log(res);
        this.$message.success("选课成功")
      }).catch(err => {
        this.$message.error(err.response.data.message)
      })

    },
    getCourseDetails() {
      this.courseNumber = this.$route.params.courseId;
      this.$axios
        .get("http://localhost:8000/course/" + this.courseNumber, {
          headers: {
            Authorization: sessionStorage.getItem('access-admin')
          }
        })
        .then((res) => {
          this.courseDetials = res.data;
          // console.log(this.courseDetials)
        })
        .catch((err) => {
          console.log(err)
          this.$message.error(err.response.data.message)
        });
    },
    getSomeUserInfo() {
      this.$axios.get("http://localhost:8000/getUserInfo", {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      })
        .then(res => {
          // console.log(res.data)
          this.userId = res.data.id
          this.username = res.data.username
        })
        .catch(err => {
          console.log(err)
          this.$message.error(err.response.data.message)
        })
    },
    timeToChinese(time) {
      var str = time.split('-')
      var numArray = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三'];
      var weekArray = ['日', '一', '二', '三', '四', '五', '六',];
      var weekNum = parseInt(str[0]);
      var startNum = parseInt(str[1]);
      var endNum = parseInt(str[2]);
      var ChineseTime = '周' + weekArray[weekNum] + " 第" + numArray[startNum - 1] + "到第" + numArray[endNum - 1] + "节";
      return ChineseTime
    },
    // score(course) {
    //   this.courseId = course.id
    // },
    // realScore(){
    //   this.$axios({
    //     method: "post",
    //     url: "http://localhost:8000/grade/saveGrade",
    //     headers: {
    //       Authorization: sessionStorage.getItem('access-admin')
    //     },
    //     data: {
    //       userId: this.userId,
    //       courseId: this.courseId,
    //       grade:this.courseScore
    //     }
    //   }).then((res) => {
    //     console.log(res);
    //   }).catch(err => {
    //     this.$message.error(err.data.message)
    //   })
    // }

  },
  created() {
    this.getCourseDetails();
    this.getSomeUserInfo();
  },
};
</script>

<style>

</style>